<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件绑定</title>
</head>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<!-- 引入 babel  将jsx语法 转换为 js语法 -->
<script src="./js/babel.min.js"></script>
<body>
    <div id="root"></div>
</body>
<script type="text/babel">

    function demo(){
        alert("我是一个外部函数");
    }

    function demo1(){
        return ()=>{
            alert("1111111111111111111111");
        }
    }


    let vdom = <div>
            <button onClick={function(){
                alert("我是一个普通函数");
            }} >点击普通函数</button>


            <button onClick={()=>{
                alert("我是一个箭头函数");
            }}>点击箭头函数</button>

            <button onClick={ demo }>点击外部函数</button>


            <button onClick={demo1()}>点击外部执行函数</button>

             {/* 事件源 */}
            <h1 onClick={function(e){
                // console.log(this);
                // alert(this.innerHTML);
                console.log(e.target.innerHTML);
            }}>再看，就把你喝掉！！！</h1>


            {/* 阻止默认行为 */}
            <a onClick={function(e){
                e.preventDefault();
            }} href="https://www.baidu.com">百度一下</a>

            {/* onchange事件    输入框内容改变并失去焦点 */}
            <input type="text" onChange={function(){
                console.log(" 输入框内容改变");
            }} />

        
        </div>

    //渲染
    ReactDOM.render(vdom,document.getElementById("root"));

</script>
</html>